<template>
	<view class="container">
		<sub-navigationbar text="优惠券商品详情" btnText=""></sub-navigationbar>
		<view class="good-wrap">
			<view class="coupon">
				<view class="content">
					<text class="title">{{pageData.name | limitFormat}}</text>
					<view class="wrap">
						<view class="price">
							<text class="unit">¥</text>
							<text class="num">{{pageData.sellMoney}}</text>
						</view>
						<text class="condition">{{discountMsg}}</text>
					</view>
				</view>
				<view class="buy-btn">¥</view>
			</view>
			<view class="line-group">
				<text class="title">{{pageData.name | limitFormat}}{{discountMsg?`, ${discountMsg}`:''}}</text>
				<view class="number-box">
					<view class="iconfont icon-subtract" 
					:class="{'btn-disabled':couponNumber<=0}"
					@click="changeCount(-1)"
					></view>
					<input class="box" type="number" v-model="couponNumber" />
					<view class="iconfont icon-add"
					@click="changeCount(1)"
					></view>
				</view>
			</view>
			<view class="line-group">
				<text class="price">¥{{pageData.sellMoney}}</text>
				<text class="date">有效期至{{pageData.endTime | dateFormat}}</text>
			</view>
			<view class="info">说明：购买完成后可以在优惠券中查看</view>
			<view class="price-group">
				<text class="label">商品金额:</text>
				<text class="num">¥{{payMoney}}</text>
			</view>
		</view>
		<view class="btn-group">
			<view class="btn subbtn" hover-class="btn-hover">联系客服</view>
			<view class="btn pribtn" hover-class="btn-hover" @click="buyTicket">点击购买</view>
		</view>
	</view>
</template>

<script>
	import subNavigationbar from '@/components/sub-navigationbar.vue';
	const appData = getApp().globalData;
	export default {
		components: {
			subNavigationbar
		},
		data() {
			return {
				pid:27, // 公众号id
				gIds:null,// 全局id  pid、memberId、openid
				openid:'oGoh50eXl4VJoY6xJTDBttu68JBs', // 用户openid
				// payMoney:0, // 支付金额
				couponId:null, // 优惠券id
				couponNumber:0, // 购买的张数
				
				pageData:[],
			};
		},
		computed:{
			discountMsg() {
				let msg = `满${this.pageData.thresholdMoney}减${this.pageData.discountNumber}`;
				if(this.pageData.discountType==='折扣') msg = `${this.pageData.discountNumber}折`;
				if(this.pageData.discountType==='代金') msg = `抵扣${this.pageData.discountNumber}元`;
				if(this.pageData.discountType==='免费') msg = ``;
				return msg;
			},
			 // 支付金额
			payMoney() {
				return this.pageData.sellMoney*this.couponNumber
			}
		},
		filters:{
			dateFormat(v) {
				return v.split('T')[0].replace(/-/g,"/");
			},
			limitFormat(v,len) {
				if(!len) len = 7;
				return v.substring(0,len);
			}
		},
		onLoad(e) {
			this.pageData = JSON.parse(e.data)
			this.gIds = uni.getStorageSync('gIds') || null;
			console.log(this.pageData)
		},
		methods:{
			changeCount(type) {
				if(this.couponNumber>0 && type==-1) --this.couponNumber;
				if(type==1) this.couponNumber++;
			},
			// 点击购买
			buyTicket() {
				if(this.couponNumber<=0) {
					uni.showToast({
						icon:'none',
						title:'请选择购买数量'
					})
					return;
				}
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				let data = {
					pid:this.gIds.pid,
					openid:this.gIds.openid,
					payMoney:this.payMoney,
					couponId:this.pageData.id,
					couponNumber:this.couponNumber
				}
				uni.request({
					url:appData.baseUrl+appData.api.couponWeChatPay,
					data:data,
					header:{'content-type':'application/x-www-form-urlencoded'},
					method:"POST",
					success: (res) => {
						uni.hideLoading()
						// uni.showModal({
						// 	content:JSON.stringify(res.data)
						// })
						if(res.data.normal==1) {
							let wxData = res.data.finalPackage;
							WeixinJSBridge.invoke(
							    'getBrandWCPayRequest',
							    wxData,
							    function(res){
									// uni.showModal({
									// 	content:JSON.stringify(res.data)
									// })
									if(res.err_msg=='get_brand_wcpay_request:ok') {
										uni.showModal({
											title:'提示',
											content:'支付成功',
											showCancel:false,
											success:()=>{
												if (res.confirm) {
													uni.navigateBack();
												}
												
											}
										})
									}else if(res.err_msg == "get_brand_wcpay_request:cancel") {
										uni.showModal({
											title:'提示',
											content:'取消支付'
										})
									}else if(res.err_msg == "get_brand_wcpay_request:fail") {
										uni.showModal({
											title:'提示',
											content:'支付失败'
										})
									}
								}
							);
						}else {
							uni.showToast({
								icon:'none',
								title:'发生错误，请稍后重试'
							})
						}
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
@import url("../../static/iconfont/iconfont.css");
.good-wrap {
	padding: 32rpx 28rpx 0;
	box-sizing: border-box;
	width: 680rpx;
	margin: 50rpx 34rpx 84rpx 36rpx;
	border-radius: 8rpx;
	background-color: #E6F4FF;
}
.coupon{
	position:relative;
	width: 624rpx;
	height: 273rpx;
	background: url(../../static/good-detail-coupon.png) no-repeat center center /100% 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 20rpx;
	color: #fff;
	.content {
		flex: 1;
		padding: 42rpx 0 0 56rpx;
		.title {
			font-size: 40rpx;
			line-height: 56rpx;
		}
		.wrap {
			display: flex;
			align-items: center;
			.price {
				display: flex;
				align-items: center;
				.unit {
					font-size: 66rpx;
					transform: translateY(12rpx);
					margin-right: 4rpx;
				}
				.num {
					font-size: 120rpx;
					line-height: 1.1;
				}
			}
			.condition {
				font-size: 32rpx;
				color: #9ED0FA;
				transform: translateY(-22rpx);
				margin-left: 8rpx;
			}
		}
	}
	.buy-btn {
		width: 80rpx;
		font-size: 80rpx;
		padding-right:20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}
.line-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}
	.number-box {
		display: flex;
		.iconfont {
			height: 48rpx;
			width: 56rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			// font-weight: bold;
			&.btn-disabled {
				color: #ccc;
			}
		}
		.box {
			width: 48rpx;
			height: 48rpx;
			margin: 0 5rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #333333;
			text-align: center;
			background-color: #B9DAF7;
		}
	}
	.price {
		font-size: 52rpx;
		color: $xy-color-default;
		line-height: 1;
		font-weight: bold;
		margin-top: 6rpx;
	}
	.date {
		font-size: 24rpx;
		color: #999;
		transform: translateY(10rpx);
	}
}
.info {
	font-size: 24rpx;
	line-height: 1;
	padding: 10rpx 16rpx;
	color:$xy-color-default;
	border: 1px solid $xy-color-default;
	border-radius: 8rpx;
	display: inline-block;
	margin-top: 30rpx;
}
.price-group {
	height: 90rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	color: #777;
	border-top: 1rpx solid #fff;
	margin-top: 44rpx;
	.num {
		color: $xy-color-default;
		font-size: 40rpx;
		font-weight: bold;
	}
}
.btn-group {
	display: flex;
	justify-content: center;
	.btn {
		padding: 0 68rpx;
		margin: 0 42rpx;
		font-size: 28rpx;
		line-height: 3.8;
		color: #fff;
		background-color: $xy-color-default;
		border-radius: 100rpx;
		font-weight: bold;
		box-shadow: 0 6px 20px rgba(20, 130, 228,0.06);
		&.subbtn {
			color: $xy-color-default;
			background-color: $xy-color-primary;
		}
		&.btn-hover {
			filter: brightness(80%);
		}
	}
}
</style>
